<template>
  <div v-loading="loading">
    <template v-if="renderList.length > 0">
      <div class="logistics_label">
        <span
          :class="{ active: index === activeIndex }"
          v-for="(item, index) in renderList"
          :key="index"
          @click="switchIndex(index)"
          >{{ $t('order.component.packageText4', {data1: index + 1}) }}</span
        >
      </div>
      <div class="logistics-container">
        <template v-if="renderList[activeIndex].shopLogisticsType == 1">
          <div class="logistics_info">
            <div class="logistics_info_left">
              <span>{{ renderList[activeIndex].logisticsCompany }}</span>
              <span>{{ renderList[activeIndex].logisticsNumber }}</span>
            </div>

            <div class="logistics_info_right">
              <span class="view" @click="handleGetLogisticsInfo">{{$t('order.component.queryLogisticsInfo')}}</span>
              <el-tooltip
                class="item"
                :content="$t('order.component.chargingStandard', {num1: '100'})"
                placement="top"
              >
                <i class="el-icon-warning-outline" style="margin-left: 4px" />
              </el-tooltip>
            </div>
          </div>
          <template v-if="renderList[activeIndex].logisticList.length > 0">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in renderList[activeIndex].logisticList"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.time"
                placement="top"
              >
                {{ activity.status }}
              </el-timeline-item>
            </el-timeline>
          </template>
          <div class="nothing" v-if="!renderList[activeIndex].logisticList.length && renderList[activeIndex].hasSearch">
            <img :src="imageNothing" alt="" />
            <div class="tip">
              {{$t('common.form.tip.logistics.tips6')}}
            </div>
          </div>
        </template>
        <div v-else>
          <i class="iconfont icon-beipinbeijian-2"></i>
          <template v-if="renderList[activeIndex].shopLogisticsType == 2"
            >{{$t('order.component.noNeedLogistics')}}</template
          >
          <template v-if="renderList[activeIndex].shopLogisticsType == 3"
            >{{$t('common.base.pickUp')}}</template
          >
        </div>
      </div>
    </template>
    <template v-else>
      <no-data-view :notice-msg="$t('common.base.noData')"></no-data-view>
    </template>
  </div>
</template>

<script>
import { queryLogisticsDetails } from '@src/api/PortalApi.ts';
import NoDataView from '@src/component/common/NoDataViewNew';
import { getOssUrl } from '@src/util/assets'
const imageNothing = getOssUrl('/form/form-logistics-nothing.png')
export default {
  name: 'logistics',
  components: {
    NoDataView,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    orderId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      imageNothing,
      activeIndex: 0,
      loading: false, // 页面加载等待
      renderList:[]
    };
  },
  created(){
    this.renderList = this.list.map(v=>{
      return {
        ...v,
        hasSearch:false,
        logisticList:[]
      }
    })
  },
  methods: {
    switchIndex(index) {
      this.activeIndex = index;
    },
    // 查询物流信息
    async handleGetLogisticsInfo() {
      try {
        this.loading = true;
        let logisticsCompany = this.renderList[this.activeIndex].logisticsCompany;
        let logisticsNumber = this.renderList[this.activeIndex].logisticsNumber;
        const { code, data } = await queryLogisticsDetails({
          orderId: this.orderId,
          logisticsCompany,
          logisticsNumber,
        });

        if (code !== '200') {
          this.loading = false;
          return this.$message.error(this.$t('order.tips.queryLogisticsInfoFailed'));
        }

        this.loading = false;
        this.renderList[this.activeIndex].hasSearch = true;
        this.renderList[this.activeIndex].logisticList = data?.list;
      } catch (error) {
        this.loading = false;
        console.error('fetch logistics info error', error);
      }
    },
  },
};
</script>

<style lang="scss" scope>
.logistics_label {
  border-bottom: 1px solid #e8e8e8;
  span {
    display: inline-block;
    width: 54px;
    height: 28px;
    background: #f5f5f5;
    border-radius: 16px;
    line-height: 28px;
    text-align: center;
    margin: 0 12px 15px 0;
    cursor: pointer;
    &.active {
      background: #edf7fb;
      color: $color-primary-light-6;
    }
  }
}
.logistics-container {
  padding: 14px 4px;
  min-height: 300px;
  .logistics_info {
    padding: 0 0 20px;
    .logistics_info_left {
      font-size: 14px;
      font-weight: bold;
      color: #262626;
    }
    .logistics_info_right{
      margin-top: 10px;
      .view{
        color: $color-primary-light-6;
        cursor: pointer;
      }
    }
  }
  .el-timeline {
    padding: 0;
  }
  .nothing {
    text-align: center;
    img {
      max-width: 260px;
    }
    .tip {
      margin-top: 30px;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
